<template>
  <view class="address_list">
    <!-- <uv-navbar autoBack placeholder leftIconColor="#fff" bg-color="transparent" title="收获地址"></uv-navbar> -->
    <uv-loading-page
      v-if="loading"
      :loading="true"
      bg-color="rgba(0,0,0,.5)"
    ></uv-loading-page>
    <uv-empty
      marginTop="25vh"
      v-else-if="!dataList.length"
      mode="data"
      text="暂无数据"
      icon="https://lehuopai-1311286543.cos.ap-guangzhou.myqcloud.com/img/my/icon_empty.png"
      width="80"
      height="80"
      textColor="#999999"
    ></uv-empty>
    <scroll-view
      v-else
      :scroll-x="false"
      :scroll-y="true"
      :scroll-with-animation="true"
      class="address"
    >
      <view>
        <view v-for="(item, index) in dataList" class="item">
          <view class="left" @click="handleToOrderCreate(item)">
            <radio
              color="#ff4949"
              :class="[item.is_default ? 'radio-ck' : '']"
              :checked="item.is_default"
              :disabled="!item.is_default"
            />
          </view>
          <view class="right">
            <view class="shengshiqu" @click="handleToOrderCreate(item)">
              <view class="right_text font14333">
                {{ item.province }} {{ item.city }} {{ item.area }}
                {{ item.detail_address }}
              </view>
              <view class="name font14999">
                <text class="n">{{ item.name }}</text>
                <text class="p">{{ splitPhone(item.phone) }}</text>
              </view>
            </view>

            <view class="btns">
              <view @click="edit(item)" class="edit">
                <uv-image
                  src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/shop/edit2.png"
                  width="24px"
                  height="24px"
                ></uv-image>
              </view>
              <view @click="del(item, index)" class="del">
                <uv-image
                  src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/shop/edit1.png"
                  width="24px"
                  height="24px"
                ></uv-image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="address_bottom">
      <view @click="add" class="address_bottom_btn"> 添加新收货地址 </view>
    </view>
  </view>
</template>

<script>
import { GetAddressListApi, SetAddressApi } from "@/api/shopApi/index";
import useOrder from "@/store/order";
const { order } = useOrder();
export default {
  data() {
    return {
      dataList: [],
      info: {},
      loading: false,
    };
  },
  onLoad(option) {
    if (JSON.stringify(option) !== "{}") {
      this.info = JSON.parse(decodeURIComponent(option?.info));
    }
    this.init();
  },
  async onShow() {},
  methods: {
    async init() {
      this.loading = true;
      const { data } = await GetAddressListApi();
      this.dataList = data.data.data;
      this.loading = false;
    },
    add() {
      uni.navigateTo({
        url: "/pages/shop/user/address_edit",
      });
    },
    handleToOrderCreate(item) {
      order.addressInfo = item;
      uni.navigateTo({
        url: `/pages/shop/index/order_create`,
      });
    },
    edit(item) {
      const edit = encodeURIComponent(JSON.stringify(item));
      uni.navigateTo({
        url: "/pages/shop/user/address_edit?edit=" + edit,
      });
    },
    async del(item, index) {
      console.log(order?.addressInfo?.id, item.id);
      if (order?.addressInfo?.id === item.id) {
        uni.showToast({
          title: "当前选中地址无法删除！",
          icon: "none",
        });
        return;
      }
      this.loading = true;
      await SetAddressApi({ id: item.id }, "DELETE");
      this.init();
      uni.showToast({
        title: "删除成功",
        icon: "none",
      });
    },
    splitPhone(phone) {
      if (!phone) return;
      const start = phone.substring(0, 3); // 获取前三位可见部分
      const end = phone.substring(7); // 获取后四位可见部分
      return start + "****" + end;
    },
  },
};
</script>

<style lang="scss" scoped>
// page {
//   background: linear-gradient(180deg, #222a2c 6.25%, #080e12 59.37%);
//   height: 100%;
// }
page {
  background: #f9f9f9;
  padding-top: 20px;
}

.address_list {
  padding-bottom: 100px;
}

// .address_bottom {
//   width: 100%;
//   position: fixed;
//   right: 0;
//   left: 0;
//   bottom: 0;
//   bottom: calc(20px + env(safe-area-inset-bottom));
//   height: 100rpx;
//   display: flex;
//   flex-direction: row;
//   justify-content: center;
//   align-items: center;
// }

.item {
  margin: 0 4%;
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10rpx;
  background: #fff;
  padding: 40rpx;
}

.item .left {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100rpx;
  /* flex: 1; */
}

.item .right .name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-top: 6rpx;
}

.item .right .name .p {
  margin-left: 20rpx;
}

.item .right .shengshiqu {
  color: #999;
  overflow: hidden;
  width: 80%;
}

.item .right .address {
  color: #333;
  line-height: 60rpx;
}

.item .right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  flex: 1;
  padding-left: 10px;
  /* padding-right: 20px; */
}

.right_text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item .btns {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  height: 100rpx;
}

.item .btns .edit {
  /* background: #096; */
  padding: 0 10px;
}

::v-deep .radio-ck .uni-radio-input {
  background: #ff4949 !important;
  border: none;
}
</style>
